<!--
* description: 客户标签
* author: shensai
* createdDate:2021-1-29
-->
<template>
  <section class="editAreaAudit">
    <el-dialog
      v-dialogDrag
      :visible="editPopupsVisible"
      :title="textMap[popupsState]"
      :append-to-body="true"
      width="50%"
      :close-on-click-modal="false"
      @close="closeEditDialog"
      @opened="windowOpenBefore"
    >
      <dialogHeader
        slot="title"
        :title="titlename"
        :style-type="$store.state.app.dialogType"
      />

      <div class="filter-container filter-title">科技信息</div>

      <section class="tags-container">
        <el-tag
          v-for="(item, index) in items[0]"
          :key="item.label"
          :type="item.type"
          effect="dark"
          @click="clickTagTrigger(item, index)"
        >
          {{ item.label }}
        </el-tag>
      </section>

      <div class="filter-container filter-title">生活资讯</div>
      <section class="tags-container">
        <el-tag
          v-for="(item, index) in items[1]"
          :key="item.label"
          :type="item.type"
          effect="dark"
          @click="clickTagTrigger(item, index)"
        >
          {{ item.label }}
        </el-tag>
      </section>

      <div class="filter-container filter-title">重要客户</div>
      <section class="tags-container">
        <el-tag
          v-for="(item, index) in items[2]"
          :key="index"
          :type="item.type"
          effect="dark"
          class="elTag"
          @click="clickTagTrigger(item, index)"
        >
          {{ item.label }}
        </el-tag>
      </section>
    </el-dialog>
  </section>
</template>
<script>
// import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { custApi } from '@/api/se/customerManagement.js'

export default {
  components: {
    dialogHeader: () => import('@/components/dialogHeader')
    // OneTableTemplate
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],

  props: {
    dynamicEditRowData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 弹出是否显示
    editPopupsVisible: { type: Boolean },
    customObj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    userSelectTagArray: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

  data() {
    return {
      multable: 'multipleTable1',
      showBtn: '1', // 开关
      deleteTransferOrderDId: [],
      updateControlIdD: [],
      popupsPageCode: 'belowOrd-Edit',
      editStatus: false,
      backFormField: {}, // 备份
      titlename: '客户标签',
      dynamicTags: [],
      dylabel: [],
      dylabels: [],
      /**
       * @description 标签的数组结构
       * @author zhu.zou
       */
      items: [
        [
          { name: 'scienceMessage', type: 'info', label: '游戏', start: false, id: '1' },
          { name: 'scienceMessage', type: 'info', label: '标签A', start: false, id: '2' },
          { name: 'scienceMessage', type: 'info', label: '标签B', start: false, id: '3' },
          { name: 'scienceMessage', type: 'info', label: '标签C', start: false, id: '4' },
          { name: 'scienceMessage', type: 'info', label: '标签D', start: false, id: '5' }
        ],
        [
          { name: 'leftMessage', type: 'info', label: '购物', start: false, id: '1' },
          { name: 'leftMessage', type: 'info', label: '旅游', start: false, id: '2' },
          { name: 'leftMessage', type: 'info', label: '标签E', start: false, id: '3' },
          { name: 'leftMessage', type: 'info', label: '标签G', start: false, id: '4' }
        ],
        [
          { name: 'clientMessage', type: 'info', label: '保养', start: false, id: '1' },
          { name: 'clientMessage', type: 'info', label: '投诉', start: false, id: '2' },
          { name: 'clientMessage', type: 'info', label: '标签F', start: false, id: '3' },
          { name: 'clientMessage', type: 'info', label: '欠款', start: false, id: '4' }
        ]
      ],
      // 动态组件-按钮

      // 标题
      textMap: {
        edit: '修改订单',
        add: '预约容量设置'
      },
      dataList: [],
      cIndex: 0
    }
  },

  created() {
    this.queryTagList()
    this.tableComponents = [...this.tableComponents1, ...this.tableComponents2]
  },

  mounted() {},

  methods: {
    closeEditDialog() {
      this.$emit('update:editPopupsVisible', (this.editPopupsVisible = false))
      this.$emit('update:userSelectTagArray', this.userSelectTagArray)
    },

    /**
     * @description 当标签被点击的时候将触发这个事件
     * @author zhu.zou
     */
    clickTagTrigger(item, index) {
      (item.start = !item.start) ? item.type = 'success' : item.type = 'info'
      if (item.start) {
        this.userSelectTagArray.push(item)
      } else {
        this.userSelectTagArray = this.userSelectTagArray.filter(tagItem => {
          return !(tagItem.name == item.name && tagItem.id == item.id)
        })
      }
    },

    /**
     * @description 当窗口打开之前对状态进行赋值
     * @author zhu.zou
     */
    windowOpenBefore() {
      var nameTag = ['scienceMessage', 'leftMessage', 'clientMessage']
      this.userSelectTagArray.forEach(element => {
        this.items[nameTag.indexOf(element.name)].forEach(item => {
          if (item.id == element.id) {
            item.start = true
            item.type = 'success'
          }
        })
      })
    },
    queryTagList() {
      const queryObj = {
      // 保存mutation
        type: 'mutation',
        // api配置
        apiConfig: custApi.tagListQuery,
        // 条件/实体参数（变量），根据typeParam中的定义配置
        variables: { }
      }
      // 转换了中台请求格式数据
      var paramD = this.$getParams(queryObj)
      // 调用中台API方法（可复用）
      this.$requestAPI(paramD).then(response => {
        this.items = response.rows
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-title {
  font-size: 18px;
  font-weight: bolder;
  margin-bottom: 20px;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
.prompt {
  color: #e70020;
  font-size: 13px;
  height: 15px;
  line-height: 15px;
}
/deep/.el-dialog__body {
  margin-top: 30px;
  height: 500px;
}
/deep/.filter-params .el-col {
  margin-bottom: 15px;
}
.tags-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 30px;
  margin: 5px 0 20px 0;
}
.el-tag--small {
  margin: 0 0 5px 10px;
}
</style>
